﻿
<template>
    <section>




        <!--工具条-->
        <el-col :span='24' class='toolbar' style='padding-bottom: 0px;'>
            <el-form :inline='true' :model='filters' @submit.native.prevent>
                <el-form-item>
                    <el-input v-model='filters.name' placeholder='名称/Key'></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type='primary' @click='getDtoPage'>查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type='primary' @click='handleAdd'>新增</el-button>
                </el-form-item>
                <el-button type='danger' @click='batchRemove' :disabled='this.sels.length===0'>批量删除</el-button>
            </el-form>
        </el-col>



        <!--列表-->
        <el-table :data='users' highlight-current-row v-loading='listLoading' @selection-change='selsChange'
                  style='width: 100%;'
                  sortable='custom' @sort-change='sortKey'>

            <el-table-column prop='Examination_ID' label='编号' width='' sortable>  </el-table-column>
            <el-table-column prop='Examination_Name' label='考试名称' width='' sortable>  </el-table-column>
            <el-table-column prop='Examination_Date' label='考试时间' width='' sortable>  </el-table-column>
            <!--<el-table-column prop='Examination_CreateDate' label='' width='' sortable>  </el-table-column>
            <el-table-column prop='Examination_Remark' label='' width='' sortable>  </el-table-column>-->


            <el-table-column label='操作' width='250'>
                <template scope='scope'>
                    <el-button size='small' @click='handleUpload(scope.$index, scope.row)'> 上传成绩 </el-button>
                    <el-button size='small' @click='handleEdit(scope.$index, scope.row)'> 编辑 </el-button>
                    <el-button type='danger' size='small' @click='handleDel(scope.$index, scope.row)'> 删除 </el-button>
                </template>
            </el-table-column>

        </el-table>



        <!-- 工具条 ,分页 -->
        <el-col :span='24' class='toolbar'>

            <el-pagination layout='prev, pager, next' @current-change='handleCurrentChange' :page-size='50'
                           :total='total' style='float:right;'>
            </el-pagination>
        </el-col>



        <!--编辑界面-->
        <el-dialog title='编辑' :visible.sync='editFormVisible' v-model='editFormVisible' :close-on-click-modal='false'>
            <el-form :model='editForm' label-width='80px' :rules='editFormRules' ref='editForm'>

                <el-form-item label='' prop='Examination_ID'>
                    <el-input v-model='editForm.Examination_ID' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='Examination_Name'>
                    <el-input v-model='editForm.Examination_Name' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='Examination_Date'>
                    <el-input v-model='editForm.Examination_Date' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='Examination_CreateDate'>
                    <el-input v-model='editForm.Examination_CreateDate' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='Examination_Remark'>
                    <el-input v-model='editForm.Examination_Remark' auto-complete='off'></el-input>
                </el-form-item>


            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click.native='editFormVisible = false'>取消</el-button>
                <el-button type='primary' @click.native='editSubmit' :loading='editLoading'>提交</el-button>
            </div>
        </el-dialog>



        <!--新增界面-->
        <el-dialog title='新增' :visible.sync='addFormVisible' v-model='addFormVisible' :close-on-click-modal='false'>
            <el-form :model='addForm' label-width='80px' :rules='addFormRules' ref='addForm'>



                <!--<el-form-item label='编号' prop='Examination_ID'>
                    <el-input v-model='addForm.Examination_ID' auto-complete='off'></el-input>
                </el-form-item>-->


                <el-form-item label='考试名称' prop='Examination_Name'>
                    <el-input v-model='addForm.Examination_Name' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='考试日期' prop='Examination_Date'>
                    <!-- <el-input v-model='addForm.Examination_Date' auto-complete='off'></el-input>-->

                    <el-date-picker v-model='addForm.Examination_Date'
                                    type="date"
                                    placeholder="选择日期">
                    </el-date-picker>


                </el-form-item>


                <!--<el-form-item label='创建日期' prop='Examination_CreateDate'>
                    <el-input v-model='addForm.Examination_CreateDate' auto-complete='off'></el-input>
                </el-form-item>-->


                <el-form-item label='描述' prop='Examination_Remark'>
                    <el-input v-model='addForm.Examination_Remark' auto-complete='off'></el-input>
                </el-form-item>



            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click.native='addFormVisible = false'>取消</el-button>
                <el-button type='primary' @click.native='addSubmit' :loading='addLoading'>提交</el-button>
            </div>
        </el-dialog>


        <!-- 上传节目 -->
        <el-dialog title='上传考试成绩' :visible.sync='uploadFormVisible' v-model='uploadFormVisible' :close-on-click-modal='false'>
            <el-form :model='uploadForm' label-width='80px' :rules='uploadFormRules' ref='uploadForm'>


                <el-upload class="upload-demo"
                           drag
                           :on-success="handleUploadSuccess"
                           :on-error="handleError"
                           :on-remove="handleRemove"
                           :action=actionUp
                           limit=1
                           multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传 excel 文件，且不超过2M </div>
                </el-upload>


            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click.native='uploadFormVisible = false'>取消</el-button>
                <el-button type='primary' @click.native='uploadSubmit' :loading='uploadLoading'>提交</el-button>
            </div>
        </el-dialog>




    </section>
</template>

<script>

    import util from '../../../util/date'
    import { testapi, getPage_School_Examination, getByID_School_Examination, edit_School_Examination, add_School_Examination, batchRemove_School_Examination, Remove_School_Examination } from '../../api/api';

    export default {
        data() {   // 全局变量
            return {
                actionUp: 'http://localhost:8081/api/FileUpload', // 'https://jsonplaceholder.typicode.com/posts/',//接口地址


                filters: { name: '' },
                users: [],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列
                addDialogFormVisible: false,
                editFormVisible: false,//编辑界面是否显示
                uploadFormVisible: false,//编辑界面是否显示
                uploadForm: {
                    Examination_ID: '',
                    FileUploadID: '',
                    SysFileID: ''
                },
                uploadFormRules: {
                    //    FileUploadID: [{ required: true, message: '请上传文件', trigger: 'blur' }]
                },
                uploadLoading: false,
                editLoading: false,
                editFormRules: {
                    Examination_ID: [{ required: true, message: '请输入', trigger: 'blur' }],
                    Examination_Name: [{ required: true, message: '请输入', trigger: 'blur' }],
                    Examination_Date: [{ required: true, message: '请输入', trigger: 'blur' }],

                    Examination_Remark: [{ required: true, message: '请输入', trigger: 'blur' }],
                }
                ,
                //编辑界面数据
                editForm: {
                    Examination_ID: 0,
                    Examination_Name: '',
                    Examination_Date: null,
                    Examination_Remark: '',
                }
                ,
                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {

                    Examination_Name: [{ required: true, message: '请输入', trigger: 'blur' }],
                    Examination_Date: [{ required: true, message: '请输入', trigger: 'blur' }],

                    Examination_Remark: [{ required: true, message: '请输入', trigger: 'blur' }],
                }
                ,
                //新增界面数据
                addForm: {
                    Examination_Name: '',
                    Examination_Date: null,
                    Examination_Remark: '',
                },



            }
        },
        methods: {    // 全局方法
            // 上传
            handleUploadSuccess(response, file, fileList) {
                this.uploadForm.FileUploadID = response.newFileName;
                this.uploadForm.SysFileID = response.SysFileID;



                console.log(response.newFileName)
                console.log(file)
                console.log(fileList)
            },
            // 文件上传失败时的钩子
            handleError(err, file, fileList) {
                this.$notify.error({
                    title: '错误',
                    message: `文件上传失败`
                });
            },
            // 删除某个文件时
            handleRemove(file, fileList) {
                this.uploadForm.FileUploadID = '';

            },


            //性别显示转换
            //formatSex: function (row, column) {
            //    return row.C_Value == 2 ? '男' : row.C_Value;
            //},
            //formatterCreateTime: function (row, column) {
            //    return (!row.C_CreateTime || row.C_CreateTime == '') ? '' : util.formatDate.format(new Date(row.C_CreateTime), 'yyyy-MM-dd');
            //},
            handleCurrentChange(val) {
                this.page = val;
                this.getDtoPage();
            },
            // 测试
            sortKey(val) {
                console.log(val)
            },


            //获取用户列表
            getDtoPage() {
                let para = {
                    page: this.page,
                    key: this.filters.name
                };
                this.listLoading = true;

                testapi();

                getPage_School_Examination(para).then((res) => {
                    console.log(res);
                    this.total = res.data.response.dataCount;
                    this.users = res.data.response.data;
                    this.listLoading = false;

                });
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = { id: row.Examination_ID };
                    Remove_School_Examination(para).then((res) => {
                        if (util.isEmt.format(res)) {
                            this.listLoading = false;
                            return;
                        }
                        this.listLoading = false;
                        if (res.data.success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                        this.getDtoPage();
                    });
                }).catch((c) => {
                    console.log(c);
                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;

                let para_getGetByID = { id: row.Examination_ID };

                getByID_School_Examination(para_getGetByID).then((getDto) => {

                    this.editForm = Object.assign({}, getDto.data.response);
                });
            },
            // 上传成绩节目
            handleUpload: function (index, row) {
                this.uploadFormVisible = true;
                this.uploadForm.Examination_ID = row.Examination_ID;
                let para_getGetByID = { id: row.Examination_ID };

                //getByID_School_Examination(para_getGetByID).then((getDto) => {
                //    //this.uploadForm = Object.assign({}, getDto.data.response);
                //});
            },
            //显示新增界面
            handleAdd() {
                this.addFormVisible = true;
                this.addForm = {
                    Examination_Name: '',
                    Examination_Date: null,

                    Examination_Remark: '',
                }
                    ;
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editForm);
                            console.log(para);
                            edit_School_Examination(para).then((res) => {

                                if (util.isEmt.format(res)) {
                                    this.editLoading = false;
                                    return;
                                }
                                if (res.data.success) {
                                    this.editLoading = false;

                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.$refs['editForm'].resetFields();
                                    this.editFormVisible = false;
                                    this.getDtoPage();
                                } else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }
                            });
                        });
                    }
                });
            },
            //新增
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(() => {
                            this.addLoading = true;
                            let para = Object.assign({}, this.addForm);

                            add_School_Examination(para).then((res) => {

                                if (util.isEmt.format(res)) {
                                    this.addLoading = false;
                                    return;
                                }

                                if (res.data.success) {
                                    this.addLoading = false;
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.$refs['addForm'].resetFields();
                                    this.addFormVisible = false;
                                    this.getDtoPage();
                                }
                                else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }
                            });
                        });
                    }
                });
            },
            // 上传提交
            uploadSubmit: function () {
                //this.$refs.uploadForm.validate((valid) => {
                if (this.uploadForm.FileUploadID) {
                    this.$confirm('确认提交吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', }).then(() => {
                        this.uploadLoading = true;
                        let para = Object.assign({}, this.uploadForm);
                        console.log('上传提交');
                        console.log(para);
                        console.log(this.uploadForm);




                    });
                } else {
                    this.$message({
                        message: '请上传成绩表',
                        type: 'warning'
                    });
                }
                //});
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {

                var ids = this.sels.map(item => item.Examination_ID).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    this.listLoading = true;
                    let para = { ids: ids };

                    batchRemove_School_Examination(para).then((res) => {
                        this.listLoading = false;

                        if (res.data.success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                        this.getDtoPage();
                        console.log(res)
                    });
                }).catch(() => {

                });
            }
        },
        mounted() {
            this.getDtoPage();
        }
    }

</script>

<style scoped>
</style>
